<template>
  <div style="margin:0 20px 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);background-color: #FFFFFF">
<!--    选项卡-->
    <div style=" display: flex;
                 justify-content: flex-start; /* 让子元素靠右对齐 */">
      <el-radio-group v-model="type" @change="change" size="large">
        <el-radio-button value="10" label="基本信息" ></el-radio-button>
        <el-radio-button value="20" label="中西医诊断"></el-radio-button>
      </el-radio-group>
    </div>

    <el-form>
      <!--    基本信息-->
      <div v-show="showBasicInfo">
      <div style="border: 1px solid #E3E3E3;padding: 10px 0;">
        <table style="width: 100%;border-spacing:63px 0">
          <tr>
            <td><el-form-item label="病案号">
              <el-input placeholder="点击选择患者或手动输入" style="width:250px;" @click="caseDialog" v-model="hospitalizationForm.caseId"></el-input>
            </el-form-item></td>
            <td><el-form-item label="医疗付款方式">
              <el-select placeholder="请选择" v-model="hospitalizationForm.payType" style="width:250px;">
                <el-option v-for="item in payTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item></td>
            <td rowspan="2"><el-form-item label="头像上传">
              <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                list-type="picture-card"
                :on-preview="handlePictureAvatarPreview"
                :on-remove="handleRemove"
              >
              <el-icon>
                <Plus/>
              </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl"/>
              </el-dialog>
            </el-form-item></td>
          </tr>
          <tr>
            <td><el-form-item label="住院号">
              <el-input placeholder="请输入" v-model="hospitalizationForm.hsptNum" style="width:250px;"></el-input>
            </el-form-item></td>
            <td><el-form-item>
              第&nbsp;&nbsp;<el-input v-model="hospitalizationForm.hsptCount" style="width: 40px"></el-input>&nbsp;&nbsp;次住院
            </el-form-item></td>
          </tr>
        </table>
      </div>
      <div style="border: 1px solid #E3E3E3;padding: 30px 50px 10px 50px;">
        <el-row >
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="姓名">
                <el-input v-model="hospitalizationForm.name" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex-container">
              <el-form-item label="性别">
                <el-radio-group v-model="hospitalizationForm.gender">
                  <el-radio value="10" size="large">男</el-radio>
                  <el-radio value="20" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-container">
              <el-form-item label="出生日期" >
                <el-date-picker
                    type="date"
                    placeholder="请选择"
                    style="width:250px;"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    v-model="hospitalizationForm.birthday"
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="年龄">
                <el-input :disabled="!hospitalizationForm.age" style="width: 250px;" placeholder="输入" v-model="hospitalizationForm.age"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex-container">
              <el-form-item >
                (年龄不满1周岁)年龄&nbsp;&nbsp;<el-input :disabled="!hospitalizationForm.month" style="width: 80px" placeholder="输入" v-model="hospitalizationForm.month"></el-input>&nbsp;&nbsp;月
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex-container">
              <el-form-item >
                新生儿出生体重&nbsp;&nbsp;<el-input :disabled="!hospitalizationForm.month" style="width: 80px" placeholder="输入" v-model="hospitalizationForm.birthWeight"></el-input>&nbsp;&nbsp;克
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="flex-container">
              <el-form-item >
                新生儿入院体重&nbsp;&nbsp;<el-input :disabled="!hospitalizationForm.month" style="width: 80px" placeholder="输入" v-model="hospitalizationForm.admissionWeight"></el-input>&nbsp;&nbsp;克
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="证件类型" >
                <el-select v-model="hospitalizationForm.idCardType" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="证件号" >
                <el-input v-model="hospitalizationForm.idCardId" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="flex-container">
              <el-form-item label="民族" >
                <el-select v-model="hospitalizationForm.ethnicGroup" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in ethnicGroupArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="籍贯" >
                <el-input v-model="hospitalizationForm.color" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="职业" >
                <el-select v-model="hospitalizationForm.job" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in jobArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="flex-container">
              <el-form-item label="婚姻状况" >
                <el-select v-model="hospitalizationForm.maritalStatus" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in maritalArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="联系电话" >
                <el-input v-model="hospitalizationForm.phone" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="社保类型" >
                <el-select v-model="hospitalizationForm.socialSecurityType" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in socialSecurityTypeArr" :label="item.dictLabel" :value="item.dictValue" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="flex-container">
              <el-form-item label="社保卡号" >
                <el-input v-model="hospitalizationForm.socialSecurityId" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="出身地址" >
                <el-cascader placeholder="请选择" style="width: 250px" v-model="hospitalizationForm.birthAddress" :options="addressOptions" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="flex-container">
              <el-form-item label="出身详细地址" >
                <el-input v-model="hospitalizationForm.birthDetails" style="width: 440px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="flex-container">
              <el-form-item label="邮编" >
                <el-input v-model="hospitalizationForm.birthZip" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="户口地址" >
                <el-cascader placeholder="请选择" style="width: 250px" v-model="hospitalizationForm.accountAddress" :options="addressOptions" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="flex-container">
              <el-form-item label="户口详细地址" >
                <el-input v-model="hospitalizationForm.accountDetails" style="width: 440px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="flex-container">
              <el-form-item label="邮编" >
                <el-input v-model="hospitalizationForm.accountZip" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="现住地址" >
                <el-cascader placeholder="请选择" style="width: 250px" v-model="hospitalizationForm.currentAddress" :options="addressOptions" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="flex-container">
              <el-form-item label="现住详细地址" >
                <el-input v-model="hospitalizationForm.currentDetails" style="width: 440px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="flex-container">
              <el-form-item label="邮编" >
                <el-input v-model="hospitalizationForm.currentZip" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" >
            <div class="flex-container">
              <el-form-item label="紧急联系人" >
                <el-input v-model="hospitalizationForm.emeUser" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="紧急联系电话" >
                <el-input v-model="hospitalizationForm.emePhone" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="flex-container">
              <el-form-item label="地址" >
                <el-input v-model="hospitalizationForm.emeAddress" style="width: 250px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="border: 1px solid #E3E3E3;padding: 30px 50px 10px 50px;">
        <el-row >
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="入院日期"  >
                <el-date-picker
                    type="date"
                    placeholder="请选择"
                    style="width:250px;"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    v-model="hospitalizationForm.intoDate"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="入院科别" >
                <el-select v-model="hospitalizationForm.intoSection" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in SectionArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="病区">
                <el-input v-model="hospitalizationForm.intoWard" style="width: 100px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="转科科别">
                <el-input v-model="hospitalizationForm.changeSection" style="width: 100px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="出院日期" >
                <el-date-picker
                    type="date"
                    placeholder="请选择"
                    style="width:250px;"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    v-model="hospitalizationForm.outDate"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex-container">
              <el-form-item label="出院科别" >
                <el-select v-model="hospitalizationForm.outSection" placeholder="请选择" style="width: 250px" >
                  <el-option v-for="item in SectionArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item label="病区">
                <el-input v-model="hospitalizationForm.outWard" style="width: 100px" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="flex-container">
              <el-form-item style="color: #606266;">
                实际住院&nbsp;&nbsp;&nbsp;<el-input v-model="hospitalizationForm.hsptDay" style="width: 80px" placeholder="请输入" />&nbsp;天
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </div>
      </div>

<!--      中西医诊断-->
      <div v-show="showDiagnosis" >
        <el-card style="box-shadow: none;padding-left: 20px;padding-right: 20px;">
          <el-row :gutter="30">
            <el-col :span="18">
              <div class="flex-container">
                <el-form-item label="门(急)诊诊断" >
                  <el-input v-model="diagnosisForm.diagnosis" style="width: 1100px"  placeholder="请选择ICD-10" @click="showDialog('diagnosis')" :formatter="ICDFormatter"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item >
                  <el-input v-model="diagnosisForm.diagnosis" style="width: 350px" placeholder="自动加载ICD-10编码" />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="10">
              <div class="flex-container">
                <el-form-item label="入院诊断" >
                  <el-input v-model="diagnosisForm.intoDiagnosis"  style="width: 550px" placeholder="请选择ICD-10"  @click="showDialog('intoDiagnosis')" :formatter="ICDFormatter"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item >
                  <el-input v-model="diagnosisForm.intoDiagnosis" style="width: 350px" placeholder="自动加载ICD-10编码" />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex-container">
                <el-form-item label="入院确诊日期" >
                  <el-date-picker
                      type="date"
                      placeholder="请选择"
                      style="width:350px;"
                      value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD"
                      v-model="diagnosisForm.intoDiagnosisDate"
                  />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="flex-container-start"><b>西医诊断</b></div>
            </el-col>
            <el-col :span="12">
              <div class="flex-container-start"><b>中医诊断</b></div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="flex-container-start">
                  <table border="1px" style="border-collapse:collapse;border: #F2F2F2 1px solid;" >
                    <tr>
                      <th colspan="2" style="width: 500px;background-color: #D7D7D7">出院西医诊断</th>
                      <th style="width: 20%;background-color: #D7D7D7">疾病编码</th>
                    </tr>
                    <tr>
                      <th style="width: 20%">主要诊断</th>
                      <th><el-input v-model="diagnosisForm.wDM" @click="showDialog('wDM') " :formatter="ICDFormatter"/></th>
                      <th><el-input v-model="diagnosisForm.wDM" /></th>
                    </tr>
                    <tr>
                      <th rowspan="5">其他诊断</th>
                      <th><el-input v-model="diagnosisForm.wDO1" @click="showDialog('wDO1')" :formatter="ICDFormatter"/></th>
                      <th><el-input v-model="diagnosisForm.wDO1" /></th>
                    </tr><tr>
                    <th><el-input v-model="diagnosisForm.wDO2" @click="showDialog('wDO2')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.wDO2" /></th>
                    </tr><tr>
                    <th><el-input v-model="diagnosisForm.wDO3" @click="showDialog('wDO3')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.wDO3" /></th>
                    </tr><tr>
                    <th><el-input v-model="diagnosisForm.wDO4" @click="showDialog('wDO4')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.wDO4" /></th>
                    </tr><tr>
                    <th><el-input v-model="diagnosisForm.wDO5" @click="showDialog('wDO5')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.wDO5" /></th>
                    </tr>
                  </table>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-container-start">
                <div class="flex-container-start">
                  <table border="1px" style="border-collapse:collapse;border: #F2F2F2 1px solid;" >
                    <tr>
                      <th colspan="2" style="width: 500px;background-color: #D7D7D7">出院中医诊断</th>
                      <th style="width: 20%;background-color: #D7D7D7">疾病编码</th>
                    </tr>
                    <tr>
                      <th style="width: 20%">主病</th>
                      <th><el-input v-model="diagnosisForm.cDM" @click="showDialog('cDM')" :formatter="ICDFormatter"/></th>
                      <th><el-input v-model="diagnosisForm.cDM" /></th>
                    </tr><tr>
                    <th rowspan="5">主症</th>
                    <th><el-input v-model="diagnosisForm.cDO1" @click="showDialog('cDO1')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.cDO1" /></th>
                  </tr><tr>
                    <th><el-input v-model="diagnosisForm.cDO2" @click="showDialog('cDO2')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.cDO2" /></th>
                  </tr><tr>
                    <th><el-input v-model="diagnosisForm.cDO3" @click="showDialog('cDO3')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.cDO3" /></th>
                  </tr><tr>
                    <th><el-input v-model="diagnosisForm.cDO4" @click="showDialog('cDO4')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.wDO4" /></th>
                  </tr><tr>
                    <th><el-input v-model="diagnosisForm.cDO5" @click="showDialog('cDO5')" :formatter="ICDFormatter"/></th>
                    <th><el-input v-model="diagnosisForm.cDO5" /></th>
                  </tr>
                  </table>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-divider />
            <el-row >
              <el-col :span="11">
                <div class="flex-container">
                  <el-form-item label="损伤、中毒的外部原因"  >
                    <el-input v-model="diagnosisForm.externalCause" style="width: 600px"  placeholder="请选择ICD-10"  @click="showDialog('externalCause')" :formatter="ICDFormatter"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="flex-container">
                  <el-form-item >
                    <el-input v-model="diagnosisForm.externalCause" style="width: 230px" placeholder="自动加载ICD-10"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="flex-container">
                  <el-form-item label="药物过敏" >
                    <el-radio-group v-model="diagnosisForm.allergyRadio">
                      <el-radio value="0" size="large">无 </el-radio>
                      <el-radio value="1" size="large">有  &nbsp; &nbsp;</el-radio>
                    </el-radio-group>
                    <el-select :disabled="diagnosisForm.allergyRadio==='0'" v-model="diagnosisForm.allergy" placeholder="请选择" style="width: 200px" >
                      <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          <el-row >
              <el-col :span="9">
                <div class="flex-container">
                  <el-form-item label="病理诊断"  >
                    <el-input v-model="diagnosisForm.pathologicDiagnosis" style="width: 500px"  placeholder="请选择ICD-10"  @click="showDialog('pathologicDiagnosis')" :formatter="ICDFormatter"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="flex-container">
                  <el-form-item >
                    <el-input v-model="diagnosisForm.pathologicDiagnosis" style="width: 230px" placeholder="自动加载ICD-10"/>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="flex-container">
                  <el-form-item label="病理号" >
                    <el-input v-model="diagnosisForm.pathologicNum" style="width: 230px" />
                  </el-form-item>
                </div>
              </el-col>
            <el-col :span="5">
                <div class="flex-container">
                  <el-form-item label="录入日期" >
                    <el-date-picker
                        type="date"
                        placeholder="请选择"
                        style="width:230px;"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        v-model="diagnosisForm.intoDay"
                    />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          <el-row >
            <el-col :span="9">
              <div class="flex-container">
                <el-form-item label="感染诊断"  >
                  <el-input v-model="diagnosisForm.infection" style="width: 500px"  placeholder="请选择ICD-10"  @click="showDialog('infection')" :formatter="ICDFormatter"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="flex-container">
                <el-form-item >
                  <el-input v-model="diagnosisForm.infection" style="width: 230px" placeholder="自动加载ICD-10"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="抢救次数" >
                  <el-input v-model="diagnosisForm.rescuesNum" style="width: 230px" />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="成功次数" >
                  <el-input v-model="diagnosisForm.rescuesSucNum" style="width: 230px" />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="血型" >
                  <el-select v-model="diagnosisForm.bloodType" placeholder="请选择" style="width: 250px" >
                    <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="RH" >
                  <el-select v-model="diagnosisForm.rh" placeholder="请选择" style="width: 250px" >
                    <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="死亡患者尸检" >
                  <el-select v-model="diagnosisForm.autopsy" placeholder="请选择" style="width: 250px" >
                    <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="病案质量" >
                  <el-select v-model="diagnosisForm.medicalRecordQuality" placeholder="请选择" style="width: 250px" >
                    <el-option v-for="item in idCardTypeArr" :label="item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="科主任" >
                  <el-select v-model="diagnosisForm.sectionHead" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="主(副)任医师" >
                  <el-select v-model="diagnosisForm.priDepDoctor" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="住院医师" >
                  <el-select v-model="diagnosisForm.residentDoctor" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="责任护士" >
                  <el-select v-model="diagnosisForm.chargeNurse" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='护士'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="进修医师" >
                  <el-select v-model="diagnosisForm.advancedDoctor" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="主治医师" >
                  <el-select v-model="diagnosisForm.mainDoctor" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="质控医师" >
                  <el-select v-model="diagnosisForm.qualityControlDoctor" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="指控护士" >
                  <el-select v-model="diagnosisForm.qualityControlNurse" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='护士'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="5">
              <div class="flex-container">
                <el-form-item label="指控日期" >
                  <el-date-picker
                      type="date"
                      placeholder="请选择"
                      style="width:230px;"
                      value-format="YYYY-MM-DD"
                      format="YYYY-MM-DD"
                      v-model="diagnosisForm.qualityControlDate"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="实习医师" >
                  <el-select v-model="diagnosisForm.intern" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="编码员" >
                  <el-select v-model="diagnosisForm.encoder" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex-container">
                <el-form-item label="医疗组长" >
                  <el-select v-model="diagnosisForm.medicalLeader" placeholder="请选择" style="width: 250px" >
                    <el-option v-show="item.job==='医生'" v-for="item in staffArr" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
<!--      底部-->
      <div style="border: 1px solid #E3E3E3;padding-top: 10px; padding-right: 110px; display: flex;justify-content: flex-end">
        <el-form-item >
            <el-button >重置</el-button>
            <el-button type="primary" >保存</el-button>
        </el-form-item>
      </div>

    </el-form>
  </div>

<!--  选择患者-->
  <el-dialog title="选择患者" v-model="caseVisible" style="padding:40px;text-align: left;height: 420px;" >
    <el-input placeholder="请输入" :prefix-icon="Search" v-model="searchCaseForm.caseId" @input="loadCase" style="width: 300px;margin-bottom: 20px;"></el-input>
    <el-table :data="caseArr">
      <el-table-column prop="id" label="病案号" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center" :formatter="genderTypeFormatter"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center" ></el-table-column>
      <el-table-column prop="createTime" label="建档时间" align="center" width="180"></el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center">
        <template #default="scope">
          <el-button @click="chosePatient(scope.row)" link type="primary">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" style="text-align: right">
      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="totalCount"
                     background
                     style="float: right;padding-right: 10px;;"
      />
    </div>
  </el-dialog>

  <!--  选择ICD-10-->
  <el-dialog title="ICD-10诊断" v-model="diagnosisVisible" style="padding:40px;text-align: left;height: 420px;" >
    <el-input placeholder="请输入" :prefix-icon="Search" v-model="searchICDForm.ICD10" @input="loadICD" style="width: 300px;margin-bottom: 20px;"></el-input>
    <el-table :data="ICDArr">
      <el-table-column prop="icd10" label="ICD10" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="pinyin" label="拼音码" align="center"></el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center">
        <template #default="scope">
          <el-button @click="confirmSelection(scope.row)" link type="primary">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" style="text-align: right">
      <el-pagination layout="prev, pager, next"
                     @current-change="ICDHandleCurrentChange"
                     :current-page="ICDcurrentPage"
                     :page-size="ICDpageSize"
                     :total="ICDtotalCount"
                     background
                     style="float: right;padding-right: 10px;;"
      />
    </div>
  </el-dialog>
</template>
<script setup>

import {Plus} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import { Search } from '@element-plus/icons-vue'
import index from "vuex";
// 默认基本信息的数据
const type=ref('20');
// 定义展示信息页面
const showBasicInfo=ref();
const showDiagnosis=ref();
const change=()=>{
  if(type.value=='10'){
    showBasicInfo.value=true;
    showDiagnosis.value=false;
  }else{
    showDiagnosis.value=true;
    showBasicInfo.value=false;
  }
}
onMounted(()=>{
  change();
})

//定义数组用来保存请求回来的字典项
const payTypeArr = ref([]);
const ethnicGroupArr=ref([]);
const idCardTypeArr=ref([]);
const jobArr=ref([]);
const maritalArr=ref([]);
const socialSecurityTypeArr=ref([]);
const SectionArr=ref([]);
const genderTypeArr = ref([]);
onMounted(()=>{
  loadDictOptions(payTypeArr,'pay_type_way');
  loadDictOptions(ethnicGroupArr,'ethnic_group_type');
  loadDictOptions(idCardTypeArr,'card_type');
  loadDictOptions(jobArr,'job_type');
  loadDictOptions(maritalArr,'marital_status');
  loadDictOptions(socialSecurityTypeArr,'social_security_type')
  loadDictOptions(SectionArr,'section_type');
  loadDictOptions(genderTypeArr,'sys_user_sex');
})

// 定义是否显示患者选择弹窗 默认false
const caseVisible = ref(false);
// 定义患者数据表格数据
const caseArr =ref([]);
// 定义搜索患者表格数据
const searchCaseForm=ref({
  caseId:''
});
// 定义选择患者分页总页数
const totalCount=ref(0);
//定义选择患者当前页码
const currentPage=ref(1);
//定义选择患者每页显示条数
const pageSize=ref(5);

//分页
const handleCurrentChange=(val)=>{
  currentPage.value=val;
  loadCase();
}
// 定义保存住院病案数据
const hospitalizationForm=ref({
  caseId:'',
  payType:'',

  hsptNum:'',
  hsptCount:'',
  name:'',
  gender:'',
  birthday:'',
  age:'',
  month:'',
  birthWeight:'',
  admissionWeight:'',
  idCardType:'',
  idCardId:'',
  ethnicGroup:'',
  color:'',
  job:'',
  maritalStatus:'',
  phone:'',
  socialSecurityType:'',
  socialSecurityId:'',
  birthAddress:'',
  birthDetails:'',
  birthZip:'',
  accountAddress:'',
  accountDetails:'',
  accountZip:'',
  currentAddress:'',
  currentDetails:'',
  currentZip:'',
  emeUser:'',
  emePhone:'',
  emeAddress:'',
  intoDate:'',
  intoSection:'',
  intoWard:'',
  changeSection:'',
  outDate:'',
  outSection:'',
  outWard:'',
  hsptDay:'',

  diagnosis:'',

});
// 选择患者并自动填写患者信息
const chosePatient=(row)=>{
  hospitalizationForm.value.caseId=row.id;
  hospitalizationForm.value.name=row.name;
  hospitalizationForm.value.gender=row.gender;
  hospitalizationForm.value.birthday=row.birthday;
  if (row.age){
    hospitalizationForm.value.age=row.age.slice(0, -1);

  }
  if (row.month){
    hospitalizationForm.value.month=row.month.slice(0, -1);
  }
  caseVisible.value=false;
  caseArr.value=[];
  searchCaseForm.value=[];
}
/**头像上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(getBaseURL(5) + '/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(getBaseURL(5)+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureAvatarPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
}
/**头像上传相关代码结束**/
// 地址级联选择器数据
const addressOptions = [
  {
    value: '北京', label: '北京',
    children: [{value: '北京市', label: '北京市',
        children: [{value: '昌平区', label: '昌平区',}, {value: '朝阳区', label: '朝阳区',}, {value: '海淀区', label: '海淀区',}, {value: '密云区', label: '密云区',}],
      },
    ],
  },
  {
    value: '重庆', label: '重庆',
    children: [{value: '重庆市', label: '重庆市',
        children: [{value: '巴南区', label: '巴南区',}, {value: '北碚区', label: '北碚区',}, {value: '南岸区', label: '南岸区',}, {value: '渝北区', label: '渝北区',},],
      },
    ],
  },
  {
    value: '广西壮族自治区', label: '广西壮族自治区',
    children: [{value: '北海市', label: '北海市',
        children: [{value: '海城区', label: '海城区',}, {value: '银海区', label: '银海区',},],
      },
      {
        value: '南宁市', label: '南宁市',
        children: [{value: '宾阳县', label: '宾阳县',}, {value: '青秀区', label: '青秀区',},],
      },
    ],
  },
  {
    value: '贵州省', label: '贵州省',
    children: [{value: '贵阳市', label: '贵阳市',
        children: [{value: '开阳县', label: '开阳县',}, {value: '云岩区', label: '云岩区',},],
      },
      {
        value: '六盘水市', label: '六盘水市',
        children: [{value: '六枝特区', label: '六枝特区',}, {value: '钟山区', label: '钟山区',},],
      },
    ],
  },
  {
    value: '江苏省', label: '江苏省',
    children: [{value: '南京市', label: '南京市',
        children: [{value: '鼓楼区', label: '鼓楼区',}, {value: '玄武区', label: '玄武区',}, {value: '江宁区', label: '江宁区',}, {value: '秦淮区', label: '秦淮区',},],
      },
      {
        value: '苏州市',label: '苏州市',
        children: [{value: '姑苏区',label: '姑苏区',}, {value: '虎丘区', label: '虎丘区',},],
      },
    ],
  },
  {
    value: '辽宁省', label: '辽宁省',
    children: [{value: '鞍山市', label: '鞍山市',
        children: [{value: '立山区', label: '立山区',}, {value: '千山区', label: '千山区',},],
      },
      {
        value: '沈阳市', label: '沈阳市',
        children: [{value: '大东区', label: '大东区',}, {value: '和平区', label: '和平区',},],
      },
    ],
  },
  {
    value: '内蒙古自治区', label: '内蒙古自治区',
    children: [{value: '包头市', label: '包头市',
        children: [{value: '东河区',label: '东河区',}, {value: '九原区', label: '九原区',},],
      },
      {
        value: '呼和浩特市', label: '呼和浩特市',
        children: [{value: '回民区', label: '回民区',}, {value: '新城区', label: '新城区',},],
      },
    ],
  },
  {
    value: '四川省', label: '四川省',
    children: [{value: '成都市', label: '成都市',
        children: [{value: '郫都区', label: '郫都区',}, {value: '武侯区', label: '武侯区',},],
      },
      {
        value: '德阳市', label: '德阳市',
        children: [{value: '罗江区', label: '罗江区',}, {value: '中江县', label: '中江县',},],
      },
    ],
  },
  {
    value: '西藏自治区', label: '西藏自治区',
    children: [{value: '昌都市', label: '昌都市',
        children: [{value: '江达县', label: '江达县',}, {value: '贡觉县', label: '贡觉县',},],
      },
      {
        value: '拉萨市', label: '拉萨市',
        children: [{value: '林周县', label: '林周县',}, {value: '城关区', label: '城关区',},],
      },
    ],
  },
  {
    value: '新疆维吾尔自治区', label: '新疆维吾尔自治区',
    children: [{value: '乌鲁木齐市', label: '乌鲁木齐市',
        children: [{value: '沙依巴克区', label: '沙依巴克区',}, {value: '乌鲁木齐县', label: '乌鲁木齐县',},],},
      {
        value: '伊犁哈萨克自治州', label: '伊犁哈萨克自治州',
        children: [{value: '察布查尔锡伯自治县', label: '察布查尔锡伯自治县',},{value: '霍城县', label: '霍城县',},],
      },
    ],
  },

  {
    value: '云南省', label: '云南省',
    children: [{value: '昆明市', label: '昆明市',
        children: [{value: '五华区', label: '五华区',}, {value: '西山区', label: '西山区',},],
      },
      {
        value: '丽江市', label: '丽江市',
        children: [{value: '古城区', label: '古城区',}, {value: '华坪县', label: '华坪县',},],
      },
    ],
  },
]


// 加载患者信息方法
const loadCase=()=>{
  let data1=qs.stringify(searchCaseForm.value);
  //获取总数据条数
  axios.get(getBaseURL(5)+'/v1/hospitalization/case/select?'+data1)
      .then((response)=>{
        if (response.data.code==2000){
          totalCount.value=response.data.data.length;
        }else {
          ElMessage.error(response.data.msg);
        }
      });
  searchCaseForm.value.offset=(currentPage.value-1)*pageSize.value;
  searchCaseForm.value.limit=pageSize.value;
  let data=qs.stringify(searchCaseForm.value);
  axios.get(getBaseURL(5)+'/v1/hospitalization/case/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          caseArr.value=response.data.data;
          searchCaseForm.value.limit=0;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
// 控制选择患者弹窗是否显示并加载数据
const caseDialog=()=>{
  caseVisible.value=true;
  loadCase();
}
//对性别类型显示内容进行文字转换
const genderTypeFormatter = (row,column,cellValue,index)=>{
  if(!genderTypeArr.value){
    return cellValue;
  }
  for(let item of genderTypeArr.value){
    if(item.dictValue == cellValue){
      cellValue = item.dictLabel;
    }
  }
  return cellValue;
}
// 存储ICD10诊断表格数据
const ICDArr=ref([]);
// 定义搜索ICD
const searchICDForm=ref({
  ICD10:'',
})
// 定义选择ICD10分页总页数
const ICDtotalCount=ref(0);
//定义选择ICD10当前页码
const ICDcurrentPage=ref(1);
//定义选择ICD10每页显示条数
const ICDpageSize=ref(5);
//分页
const ICDHandleCurrentChange=(val)=>{
  ICDcurrentPage.value=val;
  loadICD();
}
//加载ICD信息方法
const loadICD=()=>{
  let data1=qs.stringify(searchICDForm.value);
  //获取总数据条数
  axios.get(getBaseURL(4)+'/v1/ICD/select?'+data1)
      .then((response)=>{
        if (response.data.code==2000){
          ICDtotalCount.value=response.data.data.length;
        }else {
          ElMessage.error(response.data.msg);
        }
      });
  searchICDForm.value.offset=(ICDcurrentPage.value-1)*ICDpageSize.value;
  searchICDForm.value.limit=ICDpageSize.value;
  let data=qs.stringify(searchICDForm.value);
  axios.get(getBaseURL(4)+'/v1/ICD/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          ICDArr.value=response.data.data;
          console.log(ICDArr.value)
          searchICDForm.value.limit=0;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
// 加载icd数据
onMounted(()=>{
  loadICD();
})
// 控制选择患者弹窗是否显示并加载数据
const diagnosisVisible=ref(false);
const selectedField = ref('');
const showDialog=(field)=>{
  diagnosisVisible.value=true;
  selectedField.value = field;
}

// 存储中西医诊断信息
const diagnosisForm=ref({
  diagnosis:'',
  intoDiagnosis:'',
  intoDiagnosisDate:'',
  wDM:'',
  wDO1:'',
  wDO2:'',
  wDO3:'',
  wDO4:'',
  wDO5:'',
  cDM:'',
  cDO1:'',
  cDO2:'',
  cDO3:'',
  cDO4:'',
  cDO5:'',
  externalCause:'',
  allergyRadio:'',
  allergy:'',
  pathologicDiagnosis:'',
  pathologicNum:'',
  intoDay:'',
  infection:'',
  rescuesNum:'',
  rescuesSucNum:'',
  bloodType:'',
  rh:'',
  autopsy:'',
  medicalRecordQuality:'',
  sectionHead:'',
  priDepDoctor:'',
  residentDoctor:'',
  chargeNurse:'',
  advancedDoctor:'',
  mainDoctor:'',
  qualityControlDoctor:'',
  qualityControlNurse:'',
  qualityControlDate:'',
  intern:'',
  encoder:'',
  medicalLeader:''
})

const  confirmSelection=(row)=>{
  if (selectedField.value === 'diagnosis') {// 或者 row.name，取决于你需要哪个
    diagnosisForm.value.diagnosis = row.icd10;
  } else if (selectedField.value === 'intoDiagnosis') {
    diagnosisForm.value.intoDiagnosis=row.icd10;
  }else if (selectedField.value === 'wDM') {
    diagnosisForm.value.wDM=row.icd10;
  }else if (selectedField.value === 'wDO1') {
    diagnosisForm.value.wDO1=row.icd10;
  }else if (selectedField.value === 'wDO2') {
    diagnosisForm.value.wDO2=row.icd10;
  }else if (selectedField.value === 'wDO3') {
    diagnosisForm.value.wDO3=row.icd10;
  }else if (selectedField.value === 'wDO4') {
    diagnosisForm.value.wDO4=row.icd10;
  }else if (selectedField.value === 'wDO5') {
    diagnosisForm.value.wDO5=row.icd10;
  }else if (selectedField.value === 'cDM') {
    diagnosisForm.value.cDM=row.icd10;
  }else if (selectedField.value === 'cDO1') {
    diagnosisForm.value.cDO1=row.icd10;
  }else if (selectedField.value === 'cDO2') {
    diagnosisForm.value.cDO2=row.icd10;
  }else if (selectedField.value === 'cDO3') {
    diagnosisForm.value.cDO3=row.icd10;
  }else if (selectedField.value === 'cDO4') {
    diagnosisForm.value.cDO4=row.icd10;
  }else if (selectedField.value === 'cDO5') {
    diagnosisForm.value.cDO5=row.icd10;
  }else if (selectedField.value === 'externalCause') {
    diagnosisForm.value.externalCause=row.icd10;
  }else if (selectedField.value === 'pathologicDiagnosis') {
    diagnosisForm.value.pathologicDiagnosis=row.icd10;
  }else if (selectedField.value === 'infection') {
    diagnosisForm.value.infection=row.icd10;
  }
  diagnosisVisible.value=false;
}
//对ICDArr显示内容进行文字转换
const ICDFormatter = (value)=>{
  if(!ICDArr.value){
    return value;
  }
  for(let item of ICDArr.value){
    if(item.icd10==value){
      value = item.name;
    }
  }
  return value;
}
// 定义存放职工信息
const staffArr=ref([]);
const loadStaff=()=>{
  axios.get(getBaseURL(5)+'/v1/staff/select')
      .then((response)=>{
        if (response.data.code==2000){
          staffArr.value=response.data.data;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
onMounted(()=>{
  loadStaff();
})
</script>

<style scoped>
.flex-container{
  display: flex;
  justify-content: flex-end;
}
.flex-container-start{
  display: flex;
  justify-content: flex-start;
}
th,tr{
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  height:30px;
}
</style>